<div class="blackFriday-container">
    <header class="blackFriday-header">
        <h1 translate-context="Title" translate>Black Friday Sale</h1>
        <black-friday-countdown></black-friday-countdown>
    </header>

    <div class="blackFriday-content">

        <div class="blackFridayOffers-container" data-offer-n="{{offers.length}}">
            <div class="blackFridayOffer-container" ng-repeat="offer in offers track by $id(offer)">

                <div class="blackFridayOffer-header">
                    <div class="bf-bubble-percent">
                        <div class="bf-bubble-percentTxt">{{ ::offer.percentage }}%<div><span  translate-context="Discount offer X% off" translate>off</span></div></div>
                    </div>
                    <div class="be-headerOffer-titles">
                        <h5>{{ ::offer.header.title }}</h5>
                        <span>{{ ::offer.header.type }}</span>
                    </div>
                </div>

                <div class="blackFridayOffer-content">

                    <div class="blackFridayOffer-price-container">
                        <div class="blackFridayOffer-price-info" ng-bind-html="getPrice(offer)"></div>
                        <div class="blackFridayOffer-price-regular">
                            <span  translate-context="Price offer" translate>Regular price</span>: <strike>{{ ::offer.price.monthlyRegular }}{{::state.perMonth}}</strike>
                        </div>
                        <div class="blackFridayOffer-price-savings">
                            {{ ::offer.savings }}
                        </div>
                        <div class="blackFridayOffer-price-billing">
                            {{ ::offer.billing }}
                        </div>
                    </div>

                    <button
                        type="button"
                        ng-disabled="state.loading"
                        class="pm_button blackFridayOffer-buy primary"
                        data-buy-offer="{{ $index }}"
                    >{{ ::state.buy }}</button>

                    <div class="bf-billedas">{{::offer.billingTxt}} {{'*'.repeat($index +1)}}</div>
                </div>
            </div>
        </div>

        <span class="blackFridayCurrent">{{ ::currentPrice }}</span>
    </div>

    <footer class="blackFriday-footer">
        <currency-selector
            data-currency="{{::state.currency}}"
            data-name="blackFridayCurrency"
        ></currency-selector>

        <div class="blackFridayAfter-container">
            <span class="blackFridayAfter-item" ng-repeat="offer in offers track by $id(offer)">
                {{'*'.repeat($index +1)}} {{ ::offer.afterBilling }}
            </span>
        </div>
    </footer>
</div>
